<template>
  <el-card class="box-card">
    <div slot="header" class="clearfix">
      <span>更换头像</span>
    </div>
    <div>
      <!-- 图片，用来展示用户选择的头像 -->
      <img v-if="avatar" :src="avatar" alt="" class="preview" />
      <img v-else src="../../../assets/images/avatar.jpg" alt="" class="preview" />
      <!-- <img :src="avatar" alt="" class="preview"> -->

      <!-- 按钮区域 -->
      <div class="btn-box">
        <!-- MIME_TYPE: 因为网络上使用 http 协议只能传输二进制和字符串, 通过官方规范的 MIMETYPE 来告知对方传输的类型, 这就是 MIME_TYPE 的作用 -->
        <!-- application/json -->
        <input @change="changeImg" accept="image/*" ref="inp" type="file" style="display: none">
        <el-button @click="$refs.inp.click()" type="primary" icon="el-icon-plus">选择图片</el-button>
        <el-button @click="upload" type="success" icon="el-icon-upload" :disabled="avatar === ''">上传头像</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
// 扩展: webpack 处理图片的方式
// 如果给图片设置 :src 那么 webpack 不会将该图片进行打包
// 解决方案: 直接导入图片, webpack 会帮我们把图片打包到出口, 并将打包后的 url 给我们
// import defaultImg from '../../../assets/images/avatar.jpg'
// console.log(img)

export default {
  name: 'UserAvatar',
  data () {
    return {
      // avatar: defaultImg
      avatar: ''
    }
  },
  methods: {
    changeImg (e) {
      // console.log(e.target.files)
      // 绑定事件, 当用户选择了图片就会触发该事件
      // e.target.files.length 如果是 0 表示用户选择了取消, 如果是 1 表示用户选择了图片
      const files = e.target.files
      if (files.length > 0) {
        // 用户选择了图片, 显示用户选择的图片
        // console.log(files[0])

        // img 标签的 src 只能设置 URL 和 BASE64
        // this.avatar = files[0]
        // 将获取到的文件 File 对象转换成 BASE64 或 URL
        // FileReader -> 文件读取器
        // 使用方法:
        // 1. 创建对象
        const fr = new FileReader()
        // 2. 读取文件
        fr.readAsDataURL(files[0])
        // 3. 获取读取的结果 事件绑定实现的
        // 因为文件读取是异步操作
        // fs.readFile('路径', 'UTF-8', result => {})
        // onload 事件: 当文件读取完成后执行
        fr.onload = (e) => {
          // console.log(e.target.result)
          // 4. 将结果赋值给 this.avatar
          this.avatar = e.target.result
        }
      } else {
        // 用户没有选择图片, 要显示默认图片
        // this.avatar = defaultImg
        this.avatar = ''
      }
    },
    async upload () {
      // HTTP 的请求方法:
      // get post put delete patch
      // 肉眼可见的区别: get 请求传参时使用的是 ?参数=参数值 queryString 查询字符串, post / put / patch 都使用请求体传参
      // 为什么分这么多请求方法呢? RESTFul 规范
      // 获取数据的接口用 get
      // 删除数据的接口用 delete
      // 某个数据更新的接口用 patch
      // 批量数据更新的接口用 put
      // 添加数据的接口用 post

      // 1. 协议的特性 (明文 TCP 无状态)
      // 2. 请求方法的区别 (幂等性)
      // 3. 状态码 (12345 开头的区别)
      // 4. 不同版本的区别 (HTTP2.0 HTTP1.1)

      // 发请求给后台
      const { data: res } = await this.$http.patch('/my/update/avatar', { avatar: this.avatar })
      if (res.code !== 0) return this.$message.error(res.message)
      this.$message.success(res.message)
      // 重新获取用户信息
      this.$store.dispatch('user/getUserInfo')
    }
  }
}
</script>

<style lang="less" scoped>
.btn-box {
  margin-top: 10px;
}
.preview {
  object-fit: cover;
  width: 350px;
  height: 350px;
}
</style>
